<script setup>
import useUser from '@/store/user.js'
import EmojiData from '@/components/emoji/emoji-data.js'
import { reSend } from '@/utils/dialog-utils.js'
import { Flag, Loading, WarningFilled } from '@element-plus/icons-vue'
import { emojiReply, unmarkTagMsg } from '@/assets/api/message.js'
import useChannel from '@/store/channel'

const props = defineProps({
  message: Object,
  disabledOperation: Boolean,
  disabledEmoji: Boolean,
  disabledTag: Boolean,
})
const emit = defineEmits(['contextmenu'])

const userStore = useUser()
const channelStore = useChannel()

const { id, userId, loading, error, metaData, mentionUsers } = toRefs(props.message)

// 是否当前用户
const isCurrentUser = computed(() => {
  return userId.value === userStore.userId
})

const mentionList = computed(() => {
  return mentionUsers?.value ? JSON.parse(mentionUsers.value) : []
})

let mentionIndex = 0
function mentionCallback(tool) {
  const content = tool.getContent()
  if (mentionList.value[mentionIndex] === userStore.userId || content.includes('全体人员')) {
    mentionIndex++
    tool.addClass('mention-user')
  }
  if ((mentionIndex && mentionIndex === mentionList.value.length) || content.includes('全体人员')) {
    mentionIndex = 0
  }
}

function clickEmoji({ type, name }) {
  emojiReply({
    msgId: id.value,
    channelId: channelStore.channelId,
    emojiName: `${type}_${name}`,
  })
}

// 取消标记
function handleUnmarkTagMsg() {
  unmarkTagMsg(props.message.id)
}
</script>

<template>
  <div class="message-render" :class="{ 'current-user': isCurrentUser }">
    <BasicMessage
      :disabled-operation="props.disabledOperation"
      :disabled-emoji="props.disabledEmoji"
      :disabled-tag="props.disabledTag"
      :message="props.message"
      :is-current-user="isCurrentUser"
      :options="{ shieldTask: true, mentionCallback, spaceReplace: true, showLink: true, links: metaData.links }">
      <template v-if="metaData.status.forwardFlag" #custom>
        <ForwardMessage
          :message="props.message"
          :is-current-user="isCurrentUser"
          :options="{ mentionCallback }"></ForwardMessage>
      </template>
    </BasicMessage>
    <div style="width: 0">
      <el-icon v-if="isCurrentUser && loading" class="message-status is-loading" size="18"><Loading /></el-icon>
      <el-tooltip v-if="isCurrentUser && error" placement="top" content="发送失败,点击重新发送">
        <el-icon class="message-status error" color="var(--elp-color-error)" size="18" @click="reSend(props.message)">
          <WarningFilled />
        </el-icon>
      </el-tooltip>
    </div>
    <!--标记图标-->
    <div v-if="metaData.status.tagFlag" class="message-mark" @click="handleUnmarkTagMsg">
      <el-icon color="#ec4c58" :size="16"><Flag></Flag></el-icon>
    </div>
    <!--悬浮按钮-->
    <div v-show="!error && !props.disabledOperation" class="message-operation">
      <div>
        <div class="message-operation-item">
          <Emoji
            :emoji-data="EmojiData"
            fixPos="upright"
            size="small"
            recent
            :customSize="{ 'V3Emoji-height': '280px' }"
            @click-emoji="clickEmoji">
            <SvgIcon name="im-hover-icon1" size="14"></SvgIcon>
          </Emoji>
        </div>
        <div class="message-operation-item">
          <MessageTag :msg-id="id">
            <SvgIcon name="im-hover-icon4" size="14"></SvgIcon>
          </MessageTag>
        </div>
        <div class="message-operation-item" @click.stop="emit('contextmenu', $event, { x: 0, y: 10 }, true)">
          <SvgIcon name="im-hover-icon5" size="14"></SvgIcon>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.message-render {
  position: relative;
  display: flex;
  &.current-user {
    flex-direction: row-reverse;
    .message-operation {
      left: unset;
      right: 3px;
    }
  }
  :deep(.basic-message) {
    .message-box-text-color {
      color: var(--elp-color-info-light);
    }
  }
  .message-status {
    position: relative;
    top: 50%;
    left: -3px;
    translate: -100% -50%;
    &.error {
      cursor: pointer;
    }
  }
  .message-mark {
    cursor: pointer;
    display: inline-block;
    height: 16px;
    &:hover {
      background-color: rgba(212, 216, 224, 0.5);
    }
  }
  .message-operation {
    position: relative;
    display: none;
    left: 3px;
    height: 30px;
    background: var(--elp-bg-color);
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #d4d8e0;
    & > div {
      @include use-flex();
      height: 100%;
    }
    .message-operation-item {
      @include use-flex(center);
      color: #bdbfc3;
      padding: 3.5px 6px;

      .svg-icon {
        color: #999;
      }
      :deep(.message-tag) {
        width: 100%;
        height: 100%;
        & > div {
          width: 100%;
          height: 100%;
        }
      }
      :deep(#EmojiItem) > div > div {
        font-size: 16px;
      }
      :deep(.V3Emoji-module__emoji-item___aCxWs),
      :deep(.V3Emoji-module__emoji-container-open-btn___Ru3N1) {
        @include use-flex(center, center);
      }
      &:hover {
        color: #0d53ff;
        background: rgba(212, 216, 224, 0.5);
      }
      & + .message-operation-item {
        border-left: 1px solid #d4d8e0;
      }
    }
  }
}
</style>
